<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <el-tabs v-model="activityName" class="demo-tabs">
        <el-tab-pane label="未完成" name="first">
          <isComplete
            v-if="activityName == 'first'"
            @getProjctId="getProjctId"
          />
        </el-tab-pane>
        <el-tab-pane label="已完成" name="second">
          <isComplete v-if="activityName == 'second'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="rightCard">
      <!-- 搜索条件盒子 -->
      <div>
        <p class="pinformation">搜索条件</p>
        <el-form
          label-width="90"
          ref="queryRef"
          :model="queryParams"
          :disabled="!queryParams.projectId"
        >
          <el-row>
            <el-col :span="4">
              <el-form-item label="检测类别：" prop="jclbId" label-width="80">
                <el-select
                  v-model="queryParams.jclbId"
                  placeholder="请选择检测类别"
                  @change="handleQuery"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in proxy.addListNoLimit(
                      jclbList,
                      'jclbId',
                      'jclbName'
                    )"
                    :key="dict.jclbId"
                    :label="dict.jclbName"
                    :value="dict.jclbId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="检测项目：" prop="jcxmName">
                <el-input
                  maxlength="100"
                  clearable
                  placeholder="请输入受检单位"
                  v-model="queryParams.jcxmName"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="方案编号：" prop="methodCode">
                <el-input
                  maxlength="100"
                  clearable
                  placeholder="请输入方案编号"
                  v-model="queryParams.methodCode"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="点位名称：" prop="pointName">
                <el-input
                  maxlength="100"
                  clearable
                  placeholder="请输入点位名称"
                  v-model="queryParams.pointName"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-row style="justify-content: center">
                <el-button type="success" @click="handleQuery">搜索</el-button>
                <el-button class="business resetBtn" @click="resetQuery"
                  >重置</el-button
                >
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 检测类别列表盒子 -->
      <div>
        <el-row>
          <p class="pinformation">样品列表</p>
          <p class="totalStyle">共 {{ sampleList.length }} 条数据</p>
        </el-row>
        <el-table
          ref="mainTableRef"
          :data="sampleList"
          v-loading="loading"
          :row-class-name="tableRowClass"
        >
          <el-table-column label="方法编号" align="center" prop="methodCode" />
          <el-table-column label="方法名称" align="center" prop="methodName" />
          <el-table-column label="检测项目" align="center" prop="jcxmNames">
            <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmNames)"></span>
          </template>
        </el-table-column>
          <el-table-column label="采集/容器" align="center">
            <template #default="scope">
              <el-button link @click="view(scope.row, 1)">{{
                scope.row.containerTypeName
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="流量" align="center" prop="" />
          <el-table-column label="固定剂" align="center" prop="fixerName" />
          <el-table-column label="样品保存" align="center" prop="saveDesc" />
          <el-table-column label="保存时长" align="center" prop="saveTime" />
          <el-table-column label="分析步骤" align="center">
            <template #default="scope">
              <el-button link @click="view(scope.row, 2)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row>
        <el-col :span="8">
          <p class="pinformation" style="margin-top: 10px">特别备注</p>
        </el-col>
        <el-col :span="16">
          <el-row style="margin-bottom: 10px">
            <p class="pinformation" style="margin-top: 12.5px">方法截图</p>
            <el-row style="padding-top: 3px; margin-left: 15px">
              <el-button
                link
                @click="handleViewMethod"
                :disabled="!heightBright"
                >查看检测方法文档</el-button
              >
              <!-- <el-select>
                <el-option v-for="item in fileList"></el-option>
              </el-select> -->
              <el-button link @click="handleViewSample" :disabled="!standId"
                >查看采样标准文档</el-button
              >
              <el-select
                v-model="standId"
                placeholder="请选择标准方法"
                filterable
                clearable
                style="margin-left: 10px"
              >
                <el-option
                  v-for="item in standList"
                  :key="item.fileId"
                  :label="item.fileName"
                  :value="item.fileId"
                />
              </el-select>
            </el-row>
          </el-row>
          <screenshotView
            :fileList="form.fileList"
            :height="21"
          ></screenshotView>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="CyGuide">
import screenshotView from "../../lab/labGuide/screenshotView/screenshotView";
import isComplete from "./components/isComplete";
import {
  listSample,
  getSampleView,
  getStepView,
  viewMethod,
  viewSample,
} from "@/api/cyCheck/cyGuide";
import { allListJclb } from "@/api/store/jclb";
const activityName = ref("first");
const standId = ref("");

const { proxy } = getCurrentInstance();
const queryParams = ref({});
const sampleList = ref([]);
const jclbList = ref([]);
const loading = ref(false);
const form = ref({ fileList: [] });
const jclbIds = ref("");

function getList() {
  loading.value = true;
  listSample(queryParams.value).then((res) => {
    sampleList.value = res.data;
    loading.value = false;
  });
}

function getJclbList() {
  allListJclb().then((res) => {
    jclbList.value = res.data;
  });
}

function handleQuery() {
  getList();
}
function resetQuery() {
  proxy.resetForm("queryRef");
  getList();
}

function getProjctId(val) {
  standList.value = []
  standId.value = ""
  if (!val) {
    return;
  } else {
    queryParams.value.projectId = val;
    getList();
    heightBright.value = "";
    jclbIds.value = "";
    form.value.fileList = [];
    proxy.resetForm("queryRef");
  }
}

function tableRowClass({ row }) {
  if (row) {
    if (row.methodId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

const standList = ref([]);

function view(row, bs) {
  heightBright.value = row.methodId;
  standList.value = []
  standId.value = ""
  viewSample({ jclbIds: row.jclbIds }).then((res) => {
    standList.value = res.data;
  });
  if (bs === 1) {
    getSampleView(row.methodId).then((res) => {
      form.value.fileList = [];
      res.data.forEach((item) => {
        if (!item) return;
        form.value.fileList.push(item);
      });
    });
  } else {
    getStepView(row.methodId).then((res) => {
      form.value.fileList = [];
      res.data.forEach((item) => {
        form.value.fileList.push(item);
      });
    });
  }
}

function handleViewMethod() {
  viewMethod(heightBright.value).then((res) => {
    if (res.data.length === 0) {
      proxy.$modal.msgSuccess("没有文档");
    } else if (res.data.length === 1) {
      proxy.$modal.loading("正在下载文件，请稍候...");
      proxy.$download
        .file(res.data[0].fileId, res.data[0].fileName)
        .then(() => {
          proxy.$modal.closeLoading();
        })
        .catch(() => {
          proxy.$modal.closeLoading();
        });
    }
  });
}

function handleViewSample() {
  proxy.$modal.loading("正在下载文件，请稍候...");
  let standName = proxy.getItemByArray(
    standList.value,
    "fileId",
    standId.value,
    "fileName"
  );
  proxy.$download
    .file(standId.value, standName+'.pdf')
    .then((resp) => {
      proxy.$modal.closeLoading();
    })
    .catch((res) => {
      proxy.$modal.closeLoading();
    });
}

const heightBright = ref("");

const heightParams = ref([{ tableName: "main", bottomHeight: 280 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

getJclbList();
</script>
